<template>
	<view style="padding: 20rpx 20rpx 0;">
		<template v-if="info">
			<view class="xxl">
				已支付
				<text style="color: #FF2C3C;">￥{{info.goods.price}}</text>
			</view>
			<view class="panel">
				<view class="row" style="gap: 20rpx;">
					<image :src="info.shop.shop_logo" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
					<view class="flex1">
						<view style="position: relative;padding-right: 120rpx;">
							{{info.shop.shop_address}}
							<view class="navigate" @click="openMap(info.shop.lat,info.shop.lng)">
								<image src="../../static/images/icon_navigate.png" mode="widthFix"
									style="width: 24rpx;margin-right: 20rpx;">
								</image>
								导航
							</view>
						</view>
						<view class="mt30 row-between">
							<view class="distance">
								<u-icon name="map" color="#999999 " size="36"></u-icon>
								<text class="text">距您{{info.shop.shop_juli}}</text>
							</view>
							<view class="contact">
								<image src="@/static/images/icon_7.png" mode="widthFix" class="icon"></image>
								<text class="text">{{info.shop.shop_tel}}</text>
								<image src="@/static/images/icon_6.png" mode="widthFix" class="phone"
									@click="callPhone(info.shop.shop_tel)"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="line dot"></view>
				<view class="mt20 row" style="gap: 20rpx;">
					<image :src="info.goods.image" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
					<view class="flex1">
						<view class="xl black" style="position: relative;padding-right: 120rpx;">
							{{info.goods.goods_name}}
						</view>
						<view class="mt20 lighter">
							{{info.goods.spec_value}}
						</view>
						<view class="mt30 black">
							<price-format :price="info.goods.lease_price" color="#FF2C3C" class="mr10"></price-format>
							(x{{info.goods.periods_attribute.num}}期)
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="mt20 xxl row-center">
					凭此二维码到店进行核销使用
				</view>
				<l-painter
					css="width:300rpx;height:300rpx;border:6rpx solid #1e8af3;padding:30rpx 50rpx;border-radius:30rpx;"
					class="row-center mb30 mt30">
					<l-painter-qrcode :text="info.order" css="width: 300rpx; height: 300rpx" />
				</l-painter>
			</view>
		</template>
	</view>
</template>

<script>
	import lPainterQrcode from '@/components/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue'
	import lPainter from '@/components/lime-painter/components/l-painter/l-painter.vue'
	import {
		getWriteOffDetails
	} from '../../../api/user';
	export default {
		data() {
			return {
				info: null,
			};
		},
		components: {
			lPainter,
			lPainterQrcode
		},
		onLoad({
			id
		}) {
			const lat = uni.getStorageSync('City_lat');
			const lng = uni.getStorageSync('City_lng');
			getWriteOffDetails({
				id,
				lat,
				lng
			}).then(res => {
				if (res.code != 1) return this.$toast({
					title: res.msg
				});
				this.info = res.data;
			})
		},
		methods: {
			/**
			 * 拨打电话
			 * @param tel 电话
			 */
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			/** 
			 * 打开地图
			 * @param {*} lat 经度
			 * @param {*} lon 纬度
			 */
			openMap(lat, lon) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					fail(e) {
						console.log('调用地图失败:', e)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.panel {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.navigate {
			position: absolute;
			right: -20rpx;
			background-color: #f6f6f6;
			padding: 10rpx;
			top: -10rpx;
			border-radius: 30rpx 0 0 30rpx;
		}

		.line {
			width: 100%;
			height: 0rpx;
			border-bottom: 2px dotted #eee;
			margin: 30rpx 0 20rpx;

			&.dot {
				position: relative;
			}

			&.dot::before,
			&.dot::after {
				content: '';
				position: absolute;
				top: 50%;
				left: -20rpx;
				transform: translate(-50%, -50%);
				width: 30rpx;
				height: 30rpx;
				background-color: #f6f6f6;
				border-radius: 100%;
			}

			&.dot::after {
				left: calc(100% + 20rpx);
			}
		}

		.distance {
			display: flex;
			align-items: center;

			.text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E8AF4;
				line-height: 24rpx;
				margin-left: 10rpx;
			}
		}

		.contact {
			display: flex;
			align-items: center;

			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 24rpx;
			}

			.phone {
				width: 36rpx;
				height: 36rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>